<template>
  <div class="lianxi_five">
    <m-header modile-title="满意度调查" go-back="true"></m-header>
    <!--情况1-->
    <div>
      <div class="all_box">
        <div class="box" v-for="(item,index) in listData">
          <div class="all_box_list">
            <p>{{item.title}}</p>
            <div class="all_box_input">
              <span>请输入你的想法：</span>
              <input type="text" placeholder="请输入满意度" @input="inputFn(index,$event)">
            </div>
          </div>
          <div class="line"></div>
        </div>
      </div>
      <div class="btn_submit">
        <button @click="subBtn">确认提交</button>
      </div>
      <div class="show_result">
        <span>输入结果显示：</span>
        <p v-for="(re,index) in inputArr">
          <span>{{re+"--"}}</span>
        </p>
      </div>
    </div>

    <!--情况2-->
    <div>
      <div class="tobe_list">
        <div class="list_box" v-for="(item, index) in data" :key="index">
          <h3>{{item.name}}</h3>
          <div class="box_single" v-for="(des, dindex) in item.data" :key="dindex">
            <div class="basics">
              <div class="bas_li"><span>姓名：</span>{{des.real_name}}</div>
              <div class="bas_li"><span>手机号：</span>{{des.phone}}</div>
              <div class="bas_time" @click="openPicker([index,dindex])">
                <span>结束时间：</span>
                <input type="text" v-model="des.cTime" placeholder="请选择结束时间" readonly>
              </div>
            </div>
            <div class="btn_part">
              <div class="btn" @click="refuseRun(des.id)">拒绝</div>
              <div class="btn" @click="adoptRun(des.id, des.cTime)">通过</div>
            </div>
          </div>
        </div>
      </div>
      <!--时间弹窗-->
      <mt-datetime-picker
        ref="picker"
        type="date"
        :startDate='startTime'
        yearFormat="{value}年"
        monthFormat="{value}月"
        dateFormat="{value}日"
        v-model="pickerValue"
        @confirm="handleConfirm">
      </mt-datetime-picker>
    </div>

  </div>
</template>
<style lang="scss">
  .lianxi_five {
    width: 100%;
    padding-top: 60px;
    .all_box {
      .box {
        width: 100%;
        .all_box_list {
          padding: 10px;
          background: #fff;
          p {
            font-size: 16px;
            line-height: 30px;
          }
          .all_box_input {
            padding: 10px 0 10px 0;
            border-top: 1px solid #f2f2f2;
            span {
              font-size: 14px;
            }
            input {
              width: 50%;
              height: 30px;
              border: 1px solid #999;
              padding: 5px;
            }
          }
        }
        .line {
          width: 100%;
          height: 5px;
          background: #f2f2f2;
        }
      }
    }
    .btn_submit {
      width: 100%;
      text-align: center;
      button {
        width: 90%;
        height: 40px;
        border-radius: 5px;
        background: #007aff;
        color: #ffffff;
        font-size: 15px;
        border: none;
      }
    }
    .show_result{
      width: 100%;
      padding: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      span:first-child{
        color: #ff0000;
        font-size: 14px;
      }
    }
    .tobe_list{
      margin-top: 20px;
      .list_box{
        h3{
          font-size: 17px;
          color: #0C7AD9;
          padding: 10px;
          background: #f2f2f2;
        }
        .box_single{
          padding: 10px;
          /*border-bottom: 10px solid #f2f2f2;*/
          .basics{
            border-radius: 5px;
            border: 1px solid #f2f2f2;
            box-shadow: 3px 2px 5px #f2f2f2;
            padding: 10px 10px;
            margin-top: 10px;
            .bas_li{
              font-size: 15px;
              color: #666666;
              margin-top: 10px;
              span{
                color: #333333;
              }
            }
            .bas_time{
              font-size: 15px;
              span{
                color: #333333;
              }
              input{
                background: white;
                outline: none;
                border: none;
                font-size: 15px;
                padding: 10px 0;
                color: #666666;
              }
              img{
                width: 8px;
                height: 15px;
                transform: rotate(90deg);
              }
            }
          }
          .btn_part{
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
            .btn{
              font-size: 16px;
              color: #ffffff;
              border-radius: 10px;
              width: 45%;
              padding: 15px 0;
              text-align: center;
            }
            .btn:first-child{
              background: #dddddd;
            }
            .btn:last-child{
              background: #0C7AD9;
            }
          }
        }
      }
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import mData from '../../../../../static/mianyi'

  export default {
    data() {
      return {
        listData: [],
        inputArr: [],
        data: [
          {
            name: '保利东湾',
            data:[
              {
                end_time: null,
                id: 11,
                phone: "15730728738",
                real_name: "墨墨",
                verify_status: 0,
              }
            ]
          },
          {
            name: '博奥城',
            data:[
              {
                end_time: null,
                id: 11,
                phone: "15730728738",
                real_name: "依依",
                verify_status: 0,
              }
            ]
          },
          {
            name: '伊莎卡',
            data:[
              {
                end_time: null,
                id: 11,
                phone: "15730728738",
                real_name: "敦敦",
                verify_status: 0,
              }
            ]
          }
        ],
        pickerValue: '', // 时间选择v-model的值
        startTime: '',
        indexArr: []
      }
    },
    created() {
      this.listData = mData
      this.startTime = new Date()
    },
    methods: {
      inputFn(i, event) {
        this.inputArr[i] = event.target.value

      },
      subBtn() {
        console.log(this.inputArr)
      },
      // 开始时间
      openPicker (index) {
        this.indexArr = index
        this.$refs.picker.open()
      },
      handleConfirm (e) {
        const [one, two] = this.indexArr
        this.data.map((item, key) => {
          if (key === one) {
            item.data = item.data.map((itemT, key2) => {
              if (key2 === two) {
                itemT.cTime = this.formatDate(e)
              }
              return itemT
            })
          }
          return item
        })
      },
      // 时间转换
      formatDate(secs) {
        var t = new Date(secs)
        var year = t.getFullYear()
        var month = t.getMonth() + 1
        if (month < 10) { month = '0' + month }
        var date = t.getDate()
        if (date < 10) { date = '0' + date }
        var hour = t.getHours()
        if (hour < 10) { hour = '0' + hour }
        var minute = t.getMinutes()
        if (minute < 10) { minute = '0' + minute }
        var second = t.getSeconds()
        if (second < 10) { second = '0' + second }
        return year + '-' + month + '-' + date
      },
      adoptRun (id, time) {
        console.log(time)
      }
    },
    components: {
      mHeader
    }
  }
</script>
